<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清晰账本</title>
    <link rel="stylesheet" href="glassmorphism.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            min-height: 100vh;
            padding: 20px;
            color: #fff;
            padding-bottom: 80px;
        }
        
        .app-container {
            max-width: 480px;
            margin: 0 auto;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .balance-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .balance-title {
            font-size: 16px;
            margin-bottom: 20px;
            opacity: 0.8;
        }
        
        .balance-amount {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 25px;
        }
        
        .balance-details {
            display: flex;
            justify-content: space-between;
        }
        
        .income, .expense {
            text-align: center;
        }
        
        .detail-label {
            font-size: 14px;
            opacity: 0.7;
            margin-bottom: 5px;
        }
        
        .detail-amount {
            font-weight: bold;
        }
        
        .income .detail-amount {
            color: #26de81;
        }
        
        .expense .detail-amount {
            color: #ff5e62;
        }
        
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 15px 10px;
            cursor: pointer;
            transition: transform 0.3s, background 0.3s;
            text-decoration: none;
            color: white;
        }
        
        .action-item:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .action-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
        }
        
        .action-name {
            font-size: 12px;
            text-align: center;
        }
        
        .recent-transactions {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: 25px;
            margin-bottom: 25px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .view-all {
            font-size: 14px;
            opacity: 0.8;
            cursor: pointer;
            text-decoration: none;
            color: white;
        }
        
        .transaction-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .transaction-item {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .transaction-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .transaction-details {
            flex: 1;
        }
        
        .transaction-title {
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .transaction-date {
            font-size: 12px;
            opacity: 0.7;
        }
        
        .transaction-amount {
            font-weight: bold;
        }
        
        .income-amount {
            color: #26de81;
        }
        
        .expense-amount {
            color: #ff5e62;
        }

        .empty-state {
            padding: 20px 0;
            text-align: center;
            opacity: 0.7;
            display: none;
        }
        
        .navigation {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .nav-item.active {
            color: #fff;
        }
        
        .float-add-button {
            position: fixed;
            right: 20px;
            bottom: 80px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            z-index: 200;
            transition: transform 0.3s, background 0.3s;
        }
        
        .float-add-button:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.2);
        }
        
        .float-add-button i {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="header">
            <div class="logo">清晰账本</div>
            <div class="user-avatar">
                <i class="material-icons">person</i>
            </div>
        </div>
        
        <div class="balance-card">
            <div class="balance-title">本月结余</div>
            <div class="balance-amount" id="balanceAmount">¥0.00</div>
            <div class="balance-details">
                <div class="income">
                    <div class="detail-label">收入</div>
                    <div class="detail-amount" id="incomeAmount">¥0.00</div>
                </div>
                <div class="expense">
                    <div class="detail-label">支出</div>
                    <div class="detail-amount" id="expenseAmount">¥0.00</div>
                </div>
            </div>
        </div>
        
        <div class="quick-actions">
            <a href="add_transaction.html" class="action-item">
                <div class="action-icon">
                    <i class="material-icons">add</i>
                </div>
                <div class="action-name">记账</div>
            </a>
            <a href="statistics.html" class="action-item">
                <div class="action-icon">
                    <i class="material-icons">pie_chart</i>
                </div>
                <div class="action-name">统计</div>
            </a>
            <a href="#" class="action-item">
                <div class="action-icon">
                    <i class="material-icons">account_balance</i>
                </div>
                <div class="action-name">预算</div>
            </a>
            <a href="#" class="action-item">
                <div class="action-icon">
                    <i class="material-icons">settings</i>
                </div>
                <div class="action-name">设置</div>
            </a>
        </div>
        
        <div class="recent-transactions">
            <div class="section-header">
                <div class="section-title">近期交易</div>
                <a href="transactions.html" class="view-all">查看全部</a>
            </div>
            
            <div class="transaction-list" id="transactionList">
                <!-- 交易列表将通过JavaScript动态填充 -->
            </div>
            
            <div class="empty-state" id="emptyState">
                暂无交易记录
            </div>
        </div>
    </div>
    
    <!-- 添加浮动按钮 -->
    <a href="add_transaction.html" class="float-add-button">
        <i class="material-icons">add</i>
    </a>
    
    <div class="navigation">
        <a href="index.html" class="nav-item active">
            <i class="material-icons">home</i>
            <span>首页</span>
        </a>
        <a href="transactions.html" class="nav-item">
            <i class="material-icons">receipt_long</i>
            <span>交易</span>
        </a>
        <a href="statistics.html" class="nav-item">
            <i class="material-icons">pie_chart</i>
            <span>统计</span>
        </a>
        <a href="my_profile.html" class="nav-item">
            <i class="material-icons">person</i>
            <span>我的</span>
        </a>
    </div>
    
    <script src="app_data.js"></script>
    <script src="mock_data.js"></script>
    <script>
        // 初始化应用
        function initializeApp() {
            // 初始化模拟数据
            if (window.MockData) {
                window.MockData.initializeMockData();
            }
            
            // 加载月度汇总数据
            loadMonthlySummary();
            
            // 加载近期交易
            loadRecentTransactions();
        }
        
        // 加载月度汇总数据
        function loadMonthlySummary() {
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();
            
            const transactionManager = new window.AppData.TransactionManager();
            const summary = transactionManager.getMonthlySummary(year, month);
            
            // 更新UI
            document.getElementById('balanceAmount').textContent = `¥${summary.balance.toFixed(2)}`;
            document.getElementById('incomeAmount').textContent = `¥${summary.totalIncome.toFixed(2)}`;
            document.getElementById('expenseAmount').textContent = `¥${summary.totalExpense.toFixed(2)}`;
        }
        
        // 加载近期交易
        function loadRecentTransactions() {
            const transactionManager = new window.AppData.TransactionManager();
            const transactions = transactionManager.getTransactions();
            
            // 获取最近5笔交易
            const recentTransactions = [...transactions]
                .sort((a, b) => new Date(b.date) - new Date(a.date))
                .slice(0, 5);
            
            const transactionListElement = document.getElementById('transactionList');
            const emptyStateElement = document.getElementById('emptyState');
            
            // 没有交易记录时显示空状态
            if (recentTransactions.length === 0) {
                transactionListElement.style.display = 'none';
                emptyStateElement.style.display = 'block';
                return;
            }
            
            // 有交易记录时隐藏空状态
            transactionListElement.style.display = 'flex';
            emptyStateElement.style.display = 'none';
            
            // 构建HTML
            let html = '';
            
            recentTransactions.forEach(transaction => {
                // 获取分类信息
                const category = getCategoryById(transaction.categoryId, transaction.type);
                
                // 金额样式
                const amountClass = transaction.type === 'expense' ? 'expense-amount' : 'income-amount';
                const amountPrefix = transaction.type === 'expense' ? '-' : '+';
                
                html += `
                    <div class="transaction-item" onclick="viewTransactionDetail('${transaction.id}')">
                        <div class="transaction-icon">
                            <i class="material-icons">${category ? category.icon : 'help'}</i>
                        </div>
                        <div class="transaction-details">
                            <div class="transaction-title">${transaction.note || (category ? category.name : '未知分类')}</div>
                            <div class="transaction-date">${formatDate(transaction.date)}</div>
                        </div>
                        <div class="transaction-amount ${amountClass}">${amountPrefix}${transaction.amount.toFixed(2)}</div>
                    </div>
                `;
            });
            
            transactionListElement.innerHTML = html;
        }
        
        // 查看交易详情
        function viewTransactionDetail(transactionId) {
            window.location.href = `transaction_detail.html?id=${transactionId}`;
        }
        
        // 获取分类信息
        function getCategoryById(categoryId, type) {
            const categories = type === 'expense' ? window.AppData.expenseCategories : window.AppData.incomeCategories;
            return categories.find(category => category.id === categoryId);
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            
            today.setHours(0, 0, 0, 0);
            yesterday.setHours(0, 0, 0, 0);
            date.setHours(0, 0, 0, 0);
            
            if (date.getTime() === today.getTime()) {
                return '今天';
            } else if (date.getTime() === yesterday.getTime()) {
                return '昨天';
            } else {
                const options = { month: 'long', day: 'numeric' };
                return date.toLocaleDateString('zh-CN', options);
            }
        }
        
        // 页面加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', initializeApp);
    </script>
</body>
</html> 